<template>
    <div class="setting-bar">
        <component :is="rightcom" :datas="currentproperties" @componenmanagement="handleComponenmanagement" />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import utils from '@/utils/index'; // 方法类

export default {
    name: 'SettingBar',
    watch: {
        // 监听右侧属性设置切换
        rightcom(newval) {
            if (newval === 'decorate') {
                utils.forEach(this.pageComponents, (res) => {
                    if (res.active === true) res.active = false;
                });
                this.setCurrentproperties(this.pageSetup);
                return;
            }
            if (newval === 'componenmanagement') {
                utils.forEach(this.pageComponents, (res) => {
                    if (res.active === true) res.active = false;
                });
                this.setCurrentproperties(this.pageComponents);
            }
        },
    },
    computed: {
        ...mapState({
            rightcom: (state) => state.dragEditor.rightcom,
            pageSetup: (state) => state.dragEditor.pageSetup,
            pageComponents: (state) => state.dragEditor.pageComponents,
            currentproperties: (state) => state.dragEditor.currentproperties,
        }),
    },
    data() {
        return {};
    },
    methods: {
        ...mapActions('dragEditor', ['setPageComponents', 'setRightcom', 'setPageSetup', 'setCurrentproperties']),
        // 组件切换后返回的位置
        handleComponenmanagement(res) {
            this.pageComponents = this.setPageComponents(res);
        },
    },
};
</script>

<style lang="scss" scoped>
.setting-bar {
    width: 376px;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    padding: 0 12px;
    background: #fff;
    border-left: 1px solid #f2f4f6;

    /* 滚动条 */
    &::-webkit-scrollbar-thumb {
        background-color: #e1e1e1;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: #a5a2a2;
    }

    &::-webkit-scrollbar {
        width: 3px;
        height: 3px;
        position: absolute;
    }

    &::-webkit-scrollbar-track {
        background-color: #fff;
    }
}
</style>
